Frontend Application Design

I. Applied Technologies

1. Single Page Application

Single Page Application (gọi tắt là SPA) là tên gọi chung cho một kiểu lập trình web.

SPA là một kiểu lập trình web mà ở đó người dùng có thể truy cập vào nhiều trang web con khác nhau mà không làm ảnh hưởng đến trang web gốc. Khi người dùng truy cập vào bất kỳ thành phần nào trên trang, SPA sẽ chỉ chạy nội dung của thành phần đó mà không tải lại toàn bộ trang như các web truyền thống. Các thành phần chung như header, footer, thanh menu sẽ được giữ nguyên.

SPA sẽ tập trung xử lý ở client, đẩy mạnh hơn vai trò của frontend. Frontend chính là phần mà người dùng có thể nhìn thấy và tiếp nhận request của người dùng từ đó xác định được những tính năng và dữ liệu cần thiết, sau đó mới gửi yêu cầu đến backend. Backend nhận yêu cầu và trả về dữ liệu ra bên ngoài website. Từ đó làm tăng trải nghiệm người dùng.

Có 2 đặc điểm lớn ảnh tạo nên sự khác biệt về cách hoạt động của web SPA so với web truyền thống là:

• Web SPA có backend và frontend rõ ràng.
• Web SPA sẽ đẩy mạnh xử lý ở frontend.

2. Progressive Web Application

PWA (progressive web apps) là dạng web app được xây dựng dựa trên các công nghệ của website, nhưng mang lại trải nghiệm tương tự như Native App. Nhờ vào tính năng của service worker, manifest và https, PWA có thể hoạt động offline ngay cả khi không có mạng. Khi người dùng vào website PWA thông qua trình duyệt trên mobile, họ có thể cài đặt website PWA trong điện thoại. Sau đó, họ có thể truy cập trở lại website thông qua icon ngay trên điện thoại, tương tự như khi họ click vào một icon của native app.

Các PWAs được viết bằng JavaScript, CSS, HTML và Json. Chúng trông và hoạt động giống như các trang web thông thường (có nghĩa là chúng có thể tìm kiếm được trong trình duyệt internet). Tuy nhiên, chúng cũng cung cấp các chức năng giống hệt với các chức năng đặc thù dành cho thiết bị di động: chúng hoạt động nhanh, có thể hoạt động ngoại tuyến, gửi thông báo đẩy và sử dụng các tính năng trên thiết bị di động của người dùng.

Hơn nữa, PWA có thể được tải lên AppStore và Google Play như một ứng dụng native thông thường.

3. Feature Flags

Feature Flag là 1 kĩ thuật cho phép developer thay đổi cách hoạt động của ứng dụng, mà không cần phải sửa code.

Feature flag thường được lưu trữ như sau:

• Lưu trữ trong configuration file hoặc biến môi trường. Khi cần sửa chỉ cần sửa config và chạy lại
• Lưu trữ trong các cdn file.
• Lưu trữ trong 1 số service bên ngoài, developer/PM có thể vào và bật/tắt flag này

Với feature flag, ta có thể roll out dần tính năng cho người dùng

4. JAM

II. Critical Practices in Gcalls

1. Những đặc điểm SPA ở Gcalls

SPA được áp dụng ở các service như contactApp, portalApp,.. một ví dụ về SPA ở Gcalls ta có thể nhìn thấy các tính năng ở trang admin ví dụ:

• app.gcalls.co/b/admin/calllog
• app.gcalls.co/b/admin/statistics
• app.gcalls.co/b/admin/agents
• app.gcalls.co/b/admin/sipaccounts
• ...

đều được xử lý ở một trang duy nhất là app.gcalls.co/b/admin.

2. Những đặc điểm PWA ở Gcalls

Ở các dự án mới Gcalls phát triển web theo xu hướng Progressive Web App (PWA). PWA cung cấp các tính năng bổ sung dựa trên thiết bị hỗ trợ, cung cấp khả năng ngoại tuyến (offline).

Trong cấu trúc source tree sẽ có thêm các file như manifest.json, src-sw.js, serviceWorkerRegistration.js,.. giúp cấu hình tên, icon,.. và cấu hình các function register service worker.

PWA được áp dụng để xây dựng các ứng dụng đa nền tảng, cho phép tối ưu trải nghiệm người dùng trên thiết bị mobile so với một website bình thường.

3. Những đặc điểm Feature Flags ở Gcalls

Feature Flags đang được áp dụng ở Webphone Service cho phép developer thay đổi cách hoạt động của ứng dụng, mà không cần phải chỉnh sửa code. Release các tính năng mới và rollout các tính năng cho các template, user role khác nhau.

Hình ảnh thêm về tính năng khi có feature role

4. Những đặc điểm JAM ở Gcalls

III. Kết Luận

Trên đây là tổng quan về công nghệ front end được áp dụng trong hệ thống Gcalls. Nếu có câu hỏi nào vui lòng điền vào form bên dưới.